<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页二</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#1e9fff!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;height:210px;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div style="margin: 10px 10px 10px 10px">
            <div class="layui-form layuimini-form" style="width: 200px;">
                <select lay-filter="typeChart" name="typeChart" id="typeChart">
                    <option value="shenHeQingKuangChart">审核情况</option>
                    <option value="zhiDaoYuanLevelChart">指导员等级</option>
                    <option value="nianJianQingKuangChart">年检情况</option>
                    <option value="nanNuChart">男女比例</option>
                    <option value="nianLingChart">年龄比例</option>
                    <option value="sportsChart">运动项目</option>
                </select>
            </div>
        </div> 
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md5">
                <div class="layui-card">
                    <div id="layerChart" style="background-color:#ffffff;min-height:700px;"></div>
                </div>
            </div>
            <div class="layui-col-md7" id="diShiRenShuDiv">
                <div class="layui-card">
                    <div id="diShiRenShuChart" style="width:100%; min-height:700px"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../lib/js/config.js" charset="utf-8"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script>
    var hasShowTwoCase = '0'; // 是否显示二级城市，0表示隐藏，1表示显示
    layui.use(['form', 'layer', 'miniTab', 'miniAdmin', 'echarts'], function () {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            miniTab = layui.miniTab,
            echarts = layui.echarts;
            miniAdmin = layui.miniAdmin;
        
        miniTab.listen();
        
        form.on('select(typeChart)', function(data) {
            type = data.value;
            if(type=='shenHeQingKuangChart') {
                $.getJSON(verificationDataURL, function (data) {
                    if (responseSuccess(miniAdmin, data) === "success") {
                        var newData = [];
                        $.each(data.data, function(index, item) {
                            if(item.ver_status!=undefined && item.ver_status!=null && item.ver_status!='') {
                                newData.push( { value: item.count, name: item.ver_status } );
                            }
                        });
                        var bingZhuangLayerChart = echarts.init(document.getElementById('layerChart'), 'walden');
                        bingZhuangChart(bingZhuangLayerChart, "审核情况", newData);
                    }
                }).fail(function () {
                    miniAdmin.error('服务内部错误');
                });
            } else if(type=='zhiDaoYuanLevelChart') {
                $.getJSON(classDataURL, function (data) {
                    if (responseSuccess(miniAdmin, data) === "success") {
                        var newData = [];
                        $.each(data.data, function(index, item) {
                            if(item.instructor_class!=undefined && item.instructor_class!=null && item.instructor_class!='') {
                                newData.push( { value: item.count, name: item.instructor_class } );
                            }
                        });
                        var bingZhuangLayerChart = echarts.init(document.getElementById('layerChart'), 'walden');
                        bingZhuangChart(bingZhuangLayerChart, "指导员等级分类", newData);
                    }
                }).fail(function () {
                    miniAdmin.error('服务内部错误');
                });
            } else if(type=='nianJianQingKuangChart') {
                $.getJSON(inspectionDataURL, function (data) {
                    if (responseSuccess(miniAdmin, data) === "success") {
                        var newData = [];
                        newData.push( { value: data.data.before, name: '2020年1月1日之前' } );
                        newData.push( { value: data.data.after, name: '2020年1月1日之后' } );
                        var bingZhuangLayerChart = echarts.init(document.getElementById('layerChart'), 'walden');
                        bingZhuangChart(bingZhuangLayerChart, "年检情况", newData);
                    }
                }).fail(function () {
                    miniAdmin.error('服务内部错误');
                });
            } else if(type=='nanNuChart') {
                $.getJSON(genderDataURL, function (data) {
                    if (responseSuccess(miniAdmin, data) === "success") {
                        var newData = [];
                        $.each(data.data, function(index, item) {
                            var nameValue = item.sex==='male'? "男":"女";
                            newData.push( { value: item.count, name: nameValue } );
                        });
                        var bingZhuangLayerChart = echarts.init(document.getElementById('layerChart'), 'walden');
                        bingZhuangChart(bingZhuangLayerChart, "男女比例", newData);
                    }
                }).fail(function () {
                    miniAdmin.error('服务内部错误');
                });
            } else if(type=='nianLingChart') {
                $.getJSON(ageDataURL, function (data) {
                    if (responseSuccess(miniAdmin, data) === "success") {
                        var newData = [];
                        newData.push( { value: data.data['<20'], name: "小于20岁" } );
                        newData.push( { value: data.data['20-50'], name: "20-50岁" } );
                        newData.push( { value: data.data['>50'], name: "大于50岁" } );
                        var bingZhuangLayerChart = echarts.init(document.getElementById('layerChart'), 'walden');
                        bingZhuangChart(bingZhuangLayerChart, "年龄比例", newData);
                    }
                }).fail(function () {
                    miniAdmin.error('服务内部错误');
                });
            } else if(type=='sportsChart') {
                $.getJSON(typeDataURL, function (data) {
                    if (responseSuccess(miniAdmin, data) === "success") {
                        var newData = [];
                        $.each(data.data, function(index, item) {
                            if(item.instructor_type!=undefined && item.instructor_type!=null && item.instructor_type!='') {
                                newData.push( { value: item.count, name: item.instructor_type } );
                            }
                        });
                        var bingZhuangLayerChart = echarts.init(document.getElementById('layerChart'), 'walden');
                        bingZhuangChart(bingZhuangLayerChart, "运动项目", newData);
                    }
                }).fail(function () {
                    miniAdmin.error('服务内部错误');
                });
            }
        });

        // 基于准备好的dom，初始化echarts实例
        // 地市人数汇总（柱状图）
        var diShiRenShuChart = echarts.init(document.getElementById('diShiRenShuChart'), 'walden');
        var access = getCookie('access');
        if(isNotDistrictAccess(access)=='yes') {
            $("#diShiRenShuChart").attr("style", "width:100%; min-height:700px");
            // 地市人数汇总数据
            $.getJSON(districtDataURL, function (data) {
                if (responseSuccess(miniAdmin, data) === "success") {
                    var xAxis = [];
                    var xAxisData = [];
                    $.each(data.data, function(index, item) {
                        if(item.city!=undefined && item.city!=null && item.city!='') {
                            xAxis.push(item.city);
                            xAxisData.push(item.count);
                        }
                    });
                    zhuZhuangChart(diShiRenShuChart, "地市人数汇总", xAxis, xAxisData);
                }
            }).fail(function () {
                miniAdmin.error('服务内部错误');
            });
        } else {
            $("#diShiRenShuDiv").attr("style", "display:none");
        }

        var bingZhuangLayerChart = echarts.init(document.getElementById('layerChart'), 'walden');
        $.getJSON(verificationDataURL, function (data) {
            if (responseSuccess(miniAdmin, data) === "success") {
                var newData = [];
                $.each(data.data, function(index, item) {
                    if(item.ver_status!=undefined && item.ver_status!=null && item.ver_status!='') {
                        newData.push( { value: item.count, name: item.ver_status } );
                    }
                });
                bingZhuangChart(bingZhuangLayerChart, "审核情况", newData);
            }
        }).fail(function () {
            miniAdmin.error('服务内部错误');
        });
        
        // diShiRenShuChart 窗口缩放自适应
        window.onresize = function() {
            diShiRenShuChart.resize();
            bingZhuangLayerChart.resize();
        }

    });

    // 饼状图
    function bingZhuangChart(chart, title, data) {
        var option = {
            title: {
                text: title,
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)',
                textStyle:{
                    fontSize: '16',        //字体大小
                    fontWeight: 'bolder'   //字体加粗
                }
            },
            series : [
                {
                    name: title,
                    type: 'pie',    // 设置图表类型为饼图
                    radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data: data,     // 数据数组，name 为数据项名称，value 为数据项值
                    itemStyle: {
                        normal: {
                            label: {
                                textStyle: {
                                    fontSize: 16,
                                    fontWeight:'bolder',
                                    color: '#000'
                                }
                            }
                        }
                    }
                }
            ]
        };
        chart.setOption(option);
    }

    // 地市人数汇总（柱状图）
    function zhuZhuangChart(chart, title, xAxis, xAxisData) {
        var option = {
            title: {
                text: title,
                left: 'center'
            },
            tooltip: {
                textStyle:{
                    fontSize: '16',        //字体大小
                    fontWeight: 'bolder'   //字体加粗
                }
            },
            xAxis: {
                data: xAxis,
                axisLabel:{
                    interval:0,
                    textStyle:{
                        fontSize: '16',		        //字体大小
                        fontWeight: 'bolder',		//字体加粗
                        color: '#000'               // 主标题文字颜色
                    }
                }
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: xAxisData
            }]
        };
        chart.setOption(option);
    }

</script>
</body>
</html>
